<template>
    <div class="welpage">
      <!-- 星空 -->
      <largeScreen></largeScreen>
  
      <!--Top Start!-->
      <div class="scanboardWp animsition">
          <div id="top">
              <div class="wp clearfix">
                  <div class="left pageTit">
                      <a class="summaryBtn" href="javascript:;">汇总面板</a>
                  </div>
                  <div class="center topLogo">
                      <a href="#">云数据面板平台</a>
                  </div>
                  <div class="right topBar">
                      <div class="topTime">{{nowTime}}</div>
                  </div>
              </div>
          </div>
          <!--Top End!-->
          
          <!--Main Start!-->
          <div id="main" class="wp clearfix">
              <div class="left">
                  <!--今日运单数量-->
                  <div class="item waybill">
                      <div class="itemTit">
                          <span class="border-yellow">今日任务数量</span>
                      </div>
                      <div class="itemCon itembg">
                          <div class="progress" >
                              <h3 class="clearfix"><span>正常任务</span><i>{{zcquantity}}单</i></h3>
                              <div class="progressBar">
                                  <span :style="{width:zcquantity+'%'}" v-if="zcquantity==100" class="bg-green"></span>
                                  <span :style="{width:zcquantity+'%'}" v-if="zcquantity>=50 && zcquantity<99" class="bg-blue"></span>
                                  <span :style="{width:zcquantity+'%'}" v-else-if="zcquantity>=10 && zcquantity<49" class="bg-yellow"></span>
                                  <span :style="{width:zcquantity+'%'}" v-else class="bg-red"></span>
                              </div>
                              <h4>{{zcquantity}}%</h4>
                          </div>
                          <div class="progress" >
                              <h3 class="clearfix"><span>群组任务</span><i>{{lsquantity}}单</i></h3>
                              <div class="progressBar">
                                  <span :style="{width:lsquantity+'%'}" v-if="lsquantity==100" class="bg-green"></span>
                                  <span :style="{width:lsquantity+'%'}" v-if="lsquantity>=50 && lsquantity<99" class="bg-blue"></span>
                                  <span :style="{width:lsquantity+'%'}" v-else-if="lsquantity>=10 && lsquantity<49" class="bg-yellow"></span>
                                  <span :style="{width:lsquantity+'%'}" v-else class="bg-red"></span>
                              </div>
                              <h4>{{lsquantity}}%</h4>
                          </div>
                          <div class="progress" >
                              <h3 class="clearfix"><span>异常任务</span><i>{{ycquantity}}单</i></h3>
                              <div class="progressBar">
                                  <span :style="{width:ycquantity+'%'}" v-if="ycquantity==100" class="bg-green"></span>
                                  <span :style="{width:ycquantity+'%'}" v-if="ycquantity>=50 && ycquantity<99" class="bg-blue"></span>
                                  <span :style="{width:ycquantity+'%'}" v-else-if="ycquantity>=10 && ycquantity<49" class="bg-yellow"></span>
                                  <span :style="{width:ycquantity+'%'}" v-else class="bg-red"></span>
                              </div>
                              <h4>{{ycquantity}}%</h4>
                          </div>
  
                      </div>
                  </div>
  
                  <!--各阶段平均用时统计-->
                  <div class="item">
                      <div class="itemTit">
                          <span class="border-green">各阶段平均用时统计</span>
                      </div>
                      <div class="itemCon">
                          <ul class="listStyle">
                              <li class="clearfix">
                                  <span>文本任务</span>
                                  <span><strong>3.4</strong>秒</span>
                              </li>
                              <li class="clearfix">
                                  <span>语音任务</span>
                                  <span><strong>24</strong>分钟</span>
                              </li>
                              <li class="clearfix">
                                  <span>图片任务</span>
                                  <span><strong>14</strong>分钟</span>
                              </li>
                              <li class="clearfix">
                                  <span>视频任务</span>
                                  <span><strong>7</strong>分钟</span>
                              </li>
                          </ul>
                      </div>
                  </div>
  
                  <!--人员信息-->
                  <div class="item">
                      <div class="itemTit">
                          <span class="border-blue">账号信息</span>
                      </div>
                      <div class="itemCon itembg">
                          <ul class="listStyle">
                              <li class="clearfix">
                                  <span>印度：<strong>5</strong>个</span>
                                  <span>美国：<strong>36</strong>个</span>
                                  <span>越南：<strong>6</strong>个</span>
                                  <span>日本：<strong>20</strong>个</span>
                                  <span>新加坡：<strong>15</strong>个</span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
  
              <div class="center">
                  <div class="centerWp">
                      <!--中间大地图-->
                      <div class="mapContainer">
                      
                          <div id="myMap" class="item">
                              <World></World>
                          </div>
                      </div>
                      
                      <!--月运单量统计图-->
                      <div class="billChart">
                          <div class="itemTit">
                              <span class="border-blue">月任务量统计图<small>(2024年12月)</small></span>
                          </div>
                          <div id="myChart1">
                              <Article></Article>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div class="right">
                  <!--总计运单数-->
                  <div class="item total itembg">
                      <div class="itemTit">
                          <span class="border-yellow">总计任务单数</span>
                      </div>
                      <div class="itemCon">
                          <div class="totalNum"><strong><CountTo :startVal='0' :endVal='total' :duration='2000'></CountTo></strong><b class="singlesty">单</b></div>
                      </div>
                  </div>
  
                  <!--基本信息-->
                  <div class="item basicInfo">
                      <div class="itemTit">
                          <span class="border-green">基本信息</span>
                      </div>
                      <div class="itemCon itembg">
                          <div class="infoPie">
                              <ul class="clearfix">
                                  <li class="color-yellow">
                                      <span class="border-yellow">{{basicInfolist.vehicle}}</span>
                                      <p>翻译</p>
                                  </li>
                                  <li class="color-green">
                                      <span class="border-green" >{{basicInfolist.trainNumber}}</span>
                                      <p>客服</p>
                                  </li>
                                  <li class="color-blue">
                                      <span class="border-blue" >{{basicInfolist.Order}}</span>
                                      <p>今日任务</p>
                                  </li>
                              </ul>
                              <div id="indicatorContainer"></div>
                          </div>
                      </div>
                  </div>
  
                  <!--运单状态-->
                  <div class="item billState">
                      <div class="itemTit">
                          <span class="border-green">任务状态</span>
                      </div>
                      <div class="itemCon">
                          <div class="StateBox">
                              <div class="StateTit">
                                  <span>账号</span>
                                  <span>使用时间</span>
                                  <span>发送成功率</span>
                              </div>
                              <div id="FontScroll">
                                  <ul>
                                      <li v-for="(item,index) in waybilllistdata" :key="index">
                                          <div class="fontInner clearfix">
                                              <span>{{item.ydnum}}</span>
                                              <span>{{item.times}}</span>
                                              <span>
                                                  <div class="progress" >
                                                      <div class="progressBar">
                                                          <span :style="{width:item.quantity+'%'}" v-if="item.quantity==100" class="bg-green"></span>
                                                          <span :style="{width:item.quantity+'%'}" v-else-if="item.quantity>=50 && item.quantity<99" class="bg-blue"></span>
                                                          <span :style="{width:item.quantity+'%'}" v-else-if="item.quantity>=10 && item.quantity<49" class="bg-yellow"></span>
                                                          <span :style="{width:item.quantity+'%'}" v-else class="bg-red"></span>
                                                      </div>
                                                      <h3><i><h4>{{item.quantity}}</h4></i></h3>
                                                  </div>
                                              </span>
                                          </div>
                                      </li>
  
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <!--Main End!-->
      </div>
  
  
  
    </div>
  </template>
  
  <script>
  import { formatTime } from '@/assets/js/index.js'
  import largeScreen from "@/components/largeScreen";
  import CountTo from 'vue-count-to';
  import World from "@/components/world";
  import Article from "@/components/article";
  //引入世界地图文件
  import "@/assets/js/world";
  export default {
    components:{
      largeScreen,
      CountTo,
      World,
      Article
    },
    data(){
      return{
        nowTime:'',
        //左侧
        zcquantity:80,
        lsquantity:15,
        ycquantity:5,
        //右侧数据
        total:368082,
        basicInfolist:{
          vehicle:'32',
          trainNumber:'60',
          Order:'100',
        },
        waybilllistdata:[
          {
              id:'1',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'100',
          },
          {
              id:'2',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'78',
          },
          {
              id:'3',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'94',
          },
          {
              id:'4',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'26',
          },
          {
              id:'5',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'7',
          },
          {
              id:'6',
              ydnum:'ZC1712120023',
              times:'2小时15分',
              quantity:'35',
          },
          
        ]
  
      }
    },
    computed:{
  
    },
    mounted () {
      this.timeFn();
    },
    methods: {
      timeFn () {
        setInterval(() => {
          var myDate = new Date();
          var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
          var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
          var myToday = myDate.getDate(); //获取当前日(1-31)
          var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
          var myHour = myDate.getHours(); //获取当前小时数(0-23)
          var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
          var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
          var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
          
          this.nowTime = myYear+'-'+this.fillZero(myMonth)+'-'+this.fillZero(myToday)+'  '+week[myDay]+'  '+this.fillZero(myHour)+':'+this.fillZero(myMinute)+':'+this.fillZero(mySecond);
  
        }, 1000)
      },
      fillZero(str){
          var realNum;
          if(str<10){
              realNum	= '0'+str;
          }else{
              realNum	= str;
          }
          return realNum;
      }
  
    }
  }
  </script>
  
  <style lang="scss" scoped>
  /* 声明字体*/
  @font-face {
      font-family: tapeworm;
      src: url('/assets/font/Tapeworm.ttf');
  }
  
  body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
  ul,ol,li{list-style:none}
  
  
  
  .welpage{
    width: 100%;
    // height: calc(100% - 70px);
    height: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background: url("/assets/img/index/bg.jpg");
    background-size: 100% 100%;
    position: relative;
  //   overflow: hidden;
  }
  
  .scanboardWp{
      height: 100%;
      position: relative;
      z-index: 11;
  }
  .color-yellow{
      color: #ffd220 !important;
  }
  .color-green{
      color: #32ffc7 !important;
  }
  .color-blue{
      color: #1eb6fe !important;
  }
  .color-red{
      color: #ff0e0d !important;
  }
  .border-yellow{
      border-color: #ffd220 !important;
  }
  .border-green{
      border-color: #32ffc7 !important;
  }
  .border-blue{
      border-color: #1eb6fe !important;
  }
  .border-red{
      border-color: #ff0e0d !important;
  }
  .bg-yellow{
      background-color: #ffd220 !important;
  }
  .bg-green{
      background-color: #32ffc7 !important;
  }
  .bg-blue{
      background-color: #1eb6fe !important;
  }
  .bg-red{
      background-color: #ff0e0d !important;
  }
  .wp{
      width: 94%;
      margin: 0 auto;
      height: 92%;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .left{
      width: 20%;
  }
  .center{
      width: 54%;
  }
  .right{
      width: 24%;
  }
  
  #top{
      height: 8%;
      border-bottom: 1px solid #162c52;
  }
  #top .pageTit{
      height: 100%;
      position: relative;
  }
  #top .pageTit a{
      display: block;
      width: 50%;
      height: 44px;
      background: url(/assets/img/index/titBg.png);
      background-size: 100% 100%;
      line-height: 44px;
      text-align: center;
      font-size: 18px;
      color: #00deff;
      position: absolute;
      top: 50%;
      margin-top: -22px;
  }
  #top .topLogo{
      text-align: center; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 32px; 
      background: linear-gradient( 0deg,#0095d6, #46daff);
      background-size: cover;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent; font-weight: bolder; cursor: text;
  }
  
  #top .topBar{
      height: 100%;
  }
  #top .topBar .topTime{
      padding-top: 18px;
      color: #fff;
      text-align: right;
  }
  #top .topBar .company{
      position: relative;
  }
  #top .topBar .company h3{
      text-align: right;
      color: #02b6d4;
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      padding: 0 15px 0 28px;
      cursor: pointer;
      position: relative;
  }
  #top .topBar .company h3:before{
      display: block;
      content: "";
      width: 20px;
      height: 20px;
      background: url(/assets/img/index/s_ico1.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 3px;
  }
  #top .topBar .company h3:after{
      display: block;
      content: "";
      width: 7px;
      height: 4px;
      background: url(/assets/img/index/s_ico2.png) no-repeat;
      position: absolute;
      right: 0;
      top: 10px;
  }
  #top .topBar .company .dropdown{
      position: absolute;
      top: 28px;
      right: -10px;
      padding: 6px 10px;
      background: #00deff;
      border-radius: 6px;
      min-width: 100px;
      display: none;
  }
  #top .topBar .company:hover .dropdown{
      display: block;
  }
  #top .topBar .company .dropdown a{
      display: block;
      text-align: center;
      line-height: 24px;
      margin: 4px 0;
  }
  
  
  #main{
      padding-top: 30px;
  }
  
  .item{
      margin-bottom: 20px;
      background-color: #222;
      background-color: rgba(0,0,0,0.3);border-radius: 8px;
  }
  .itemTit{
      padding: 12px 0;
      border-bottom: 1px solid #1e5b6b;
  }
  .itemTit span{
      display: block;
      height: 20px;
      line-height: 20px;
      border-left: 5px solid transparent;
      font-size: 18px;
      color: #fff;
      padding-left: 8px;
  }
  .itemTit span small{
      margin-left: 4px;
  }
  .itemCon{
      padding: 12px 0px;
  }
  .itembg{
      background-image: url(/assets/img/index/gz.png);
      background-repeat: repeat
  }
  
  
  .waybill .progress{
      margin-bottom: 8px;
  }
  .waybill .progress h3{
      line-height: 36px;
      color: #fff;
  }
  .waybill .progress h3 span{
      float: left;
      font-size: 16px;
  }
  .waybill .progress h3 i{
      float: right;
      font-style: normal;
  }
  .waybill .progressBar{
      height: 6px;
      background: #fff;
      background: rgba(255,255,255,0.5);
  }
  .waybill .progressBar span{
      display: block;
      height: 6px;
      width: 0;
  }
  .waybill .progress h4{
      line-height: 24px;
      color: #fff;
  }
  
  .listStyle li span{
      float: left;
      width: 50%;
      color: #fff;
      font-size: 15px;
      height: 33px;
      line-height: 32px;
  }
  .listStyle li span strong{
      font-weight: normal;
      color: #45c6c8;
      margin-right: 4px;
  }
  
  .centerWp{
      width: 94%;
      margin: 0 auto;
  }
  .mapContainer{
      width: 100%;
  }
  
  #myMap{
      width:100%;
      height: 480px; border:2px dotted rgba(0,122,255,.25); overflow: hidden;
  }
  #myMap .amap-info-content{
      background: #00deff;
      border-radius: 8px;
      box-shadow: none;
      border: none;
      padding: 15px 25px 15px 15px;
  }
  #myMap .amap-info-sharp{
      display: none;
  }
  #myMap .amap-info-close{
      /* background: url(../../assets/img/index/s_ico5.png); */
      color: #fff;
  }
  
  .billChart{
      width: 100%;
  }
  .billChart .itemTit{
      border: none;
      padding-left: 5px;
  }
  #myChart1{
      width: 100%;
      height: 210px;
  }
  .total{
      padding: 8px 0;
  }
  .total .itemTit{
      border: none;
  }
  .total .totalNum{
      color: #00deff;
      font-family: 'tapeworm';
  }
  .total .totalNum strong{
      margin-right: 12px;
      span{
          font-size: 48px;
          line-height: 72px;
          vertical-align: top;
      }
  }
  .total .totalNum b{
      font-size: 20px;
      line-height: 90px;
      vertical-align: top;
  }
  
  .infoPie ul li{
      float: left;
      width: 33%;
  }
  .infoPie ul li span{
      display: block;
      width: 68px;
      height: 68px;
      margin: 16px auto;
      border: 2px solid transparent;
      text-align: center;
      line-height: 72px;
      font-size: 24px;
      border-radius: 100%;
  }
  .infoPie ul li p{
      text-align: center;
      font-size: 16px;
      padding-bottom: 8px;
  }
  .billState .StateTit{
      height: 37px;
      border-bottom: 1px dashed #404040;
  }
  .billState .StateBox span{
      float: left;
      width: 33%;
      height: 37px;
      line-height: 37px;
      color: #fff;
      overflow: hidden;
      text-overflow:ellipsis
  }
  .billState .StateBox span:nth-child(1){
      width: 38%;
  }
  .billState .StateBox span:nth-child(2){
      width: 28%;
  }
  .billState .StateBox span:nth-child(3){
      width: 34%;
  }
  .billState .StateBox .fontInner{
      border-bottom: 1px dashed #404040;
  }
  .billState .progress{
      height: 6px;
      position: relative;
      padding-right: 50px;
      margin-top: 15px;
  }
  .billState .progress .progressBar{
      height: 6px;
      background: rgba(255,255,255,0.5);
  }
  .billState .progress .progressBar span{
      display: block;
      height: 6px;
      width: 0;
  }
  .billState .progress h3{
      position: absolute;
      height: 20px;
      width: 40px;
      line-height: 20px;
      top: -7px;
      right: 0;
  }
  .billState .progress h3 i{
      font-style: normal;
  }
  #FontScroll{
      height: 228px;
      overflow: hidden;
  }
  
  
  .filterbg{
      width: 100%;
      height: 100%;
      background: rgba(30,182,254,0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
      display: none;
  }
  .popup{
      width: 0;
      height: 0;
      background: #061f3e;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 999;
      border-radius: 8px;
      display: none;
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
  }
  .popup .popupClose{
      display: block;
      width: 44px;
      height: 44px;
      background: url(/assets/img/index/s_ico3.png);
      background-size: 100 100%;
      position: absolute;
      top: -22px;
      right: -22px;
      display: none;
      transition: 0.3s;
  }
  .popup .popupClose:hover{
      transform: rotate(180deg);
  }
  .summary{
      width: 96%;
      height: 92%;
      margin: 2% auto;
      display: none;
  }
  .summary .summaryTop{
      height: 50%;
  }
  .summary .summaryBottom{
      height: 50%;
  }
  .summaryTit{
      height: 12%;
      text-align: center;
  }
  .summaryTit img{
      height: 100%;
      max-height: 68px;
      width: auto;
  }
  .summaryPie{
      height: 100%;
      float: left;
      width: 33%;
  }
  .summaryBar{
      height: 100%;
      float: left;
      width: 30%;
      margin-right: 2%;
  }
  #summaryBar{
      height: 80%;
  }
  
  .summaryLine{
      float: left;
      width: 60%;
      height: 100%;
  }
  #summaryLine{
      height: 80%;
  }
  
  
  
  @media screen and (max-width: 1919px) and (min-width: 1680px){
      #top .pageTit a{
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          margin-top: -20px;
          width: 52%;
      }
      #top .topBar .topTime{
          padding-top: 16px;
      }
      #top .topBar .company h3{
          height: 26px;
          line-height: 26px;
          font-size: 16px;
      }
      #top .topBar .company .dropdown{
          top: 26px;
      }
  
      #main{
          padding-top: 28px;
      }
  
      .item{
          margin-bottom: 18px;
      }
      .itemTit{
          padding: 10px 30px;
      }
      .itemTit span{
          height: 20px;
          line-height: 20px;
          border-left: 4px solid transparent;
          font-size: 17px;
      }
      .itemCon{
          padding: 10px 26px;
      }
      .waybill .progress{
          margin-bottom: 8px;
      }
      .waybill .progress h3{
          line-height: 34px;
      }
      .waybill .progress h3 span{
          float: left;
      }
      .waybill .progress h4{
          line-height: 22px;
      }
  
      .listStyle li span{
          font-size: 15px;
          height: 33px;
          line-height: 32px;
      }
      #myMap{
          width: 100%;
          height: 440px;
      }
      #myMap .amap-info-content{
          background: #00deff;
          border-radius: 8px;
          box-shadow: none;
          border: none;
          padding: 15px 25px 15px 15px;
      }
      #myChart1{
          width: 100%;
          height: 210px;
      }
      .total{
          padding: 8px 0;
      }
      .total .totalNum strong span{
          font-size: 44px;
          line-height: 68px;
      }
      .total .totalNum b{
          font-size: 18px;
          line-height: 84px;
      }
  
      .infoPie ul li span{
          width: 68px;
          height: 68px;
          margin: 12px auto;
          border: 2px solid transparent;
          line-height: 72px;
          font-size: 24px;
      }
      .infoPie ul li p{
          font-size: 16px;
          padding-bottom: 8px;
      }
      .billState .StateTit{
          height: 37px;
      }
      .billState .StateBox span{
          height: 37px;
          line-height: 37px;
      }
      .billState .StateBox span:nth-child(1){
          width: 38%;
      }
      .billState .StateBox span:nth-child(2){
          width: 28%;
      }
      .billState .StateBox span:nth-child(3){
          width: 34%;
      }
      .billState .progress{
          margin-top: 15px;
      }
      .billState .progress h3{
          height: 20px;
          line-height: 20px;
          top: -7px;
      }
      #FontScroll{
          height: 228px;
      }
  
  
      .popup .popupClose{
          width: 40px;
          height: 40px;
          top: -20px;
          right: -20px;
          background-size: 100% 100%;
      }
  }
  
  @media screen and (max-width: 1679px) and (min-width: 1440px){
      #top .pageTit a{
          height: 36px;
          line-height: 36px;
          font-size: 15px;
          margin-top: -18px;
          width: 54%;
      }
      #top .topBar .topTime{
          padding-top: 10px;
      }
      #top .topBar .company h3{
          height: 24px;
          line-height: 24px;
          font-size: 15px;
      }
      #top .topBar .company h3:before{
          width: 18px;
          height: 18px;
          top: 2px;
      }
      #top .topBar .company .dropdown{
          top: 24px;
      }
  
      #main{
          padding-top: 16px;
      }
  
      .item{
          margin-bottom: 12px;
      }
      .itemTit{
          padding: 6px 24px;
      }
      .itemTit span{
          height: 18px;
          line-height: 18px;
          border-left: 4px solid transparent;
          font-size: 16px;
      }
      .itemCon{
          padding: 6px 22px;
      }
      .waybill .progress{
          margin-bottom: 4px;
      }
      .waybill .progress h3{
          line-height: 30px;
      }
      .waybill .progress h3 span{
          font-size: 14px;
      }
      .waybill .progress h4{
          line-height: 20px;
      }
  
      .listStyle li span{
          font-size: 14px;
          height: 29px;
          line-height: 28px;
      }
      #myMap{
          width: 100%;
          height: 360px;
      }
      #myMap .amap-info-content{
          background: #00deff;
          border-radius: 8px;
          box-shadow: none;
          border: none;
          padding: 15px 25px 15px 15px;
      }
      #myChart1{
          width: 100%;
          height: 178px;
      }
      .total{
          padding: 8px 0;
      }
      .total .totalNum strong span{
          font-size: 36px;
          line-height: 64px;
      }
      .total .totalNum b{
          font-size: 17px;
          line-height: 80px;
      }
  
      .infoPie ul li span{
          width: 60px;
          height: 60px;
          margin: 10px auto;
          border: 2px solid transparent;
          line-height: 64px;
          font-size: 22px;
      }
      .infoPie ul li p{
          font-size: 15px;
          padding-bottom: 8px;
      }
      .billState .StateTit{
          height: 37px;
      }
      .billState .StateBox span{
          height: 37px;
          line-height: 37px;
      }
      .billState .StateBox span:nth-child(1){
          width: 38%;
      }
      .billState .StateBox span:nth-child(2){
          width: 28%;
      }
      .billState .StateBox span:nth-child(3){
          width: 34%;
      }
      .billState .progress{
          margin-top: 15px;
      }
      .billState .progress h3{
          height: 20px;
          line-height: 20px;
          top: -7px;
      }
      #FontScroll{
          height: 190px;
      }
  
  
      .popup .popupClose{
          width: 36px;
          height: 36px;
          top: -18px;
          right: -18px;
          background-size: 100% 100%;
      }
  }
  
  @media screen and (max-width: 1439px) and (min-width: 1366px){
      #top .pageTit a{
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          margin-top: -15px;
          width: 56%;
      }
      #top .topBar .topTime{
          padding-top: 4px;
          font-size: 12px;
      }
      #top .topBar .company h3{
          height: 22px;
          line-height: 22px;
          font-size: 14px;
      }
      #top .topBar .company h3:before{
          width: 18px;
          height: 18px;
          top: 2px;
      }
      #top .topBar .company .dropdown{
          top: 22px;
      }
  
      #main{
          padding-top: 14px;
      }
  
      .item{
          margin-bottom: 10px;
      }
      .itemTit{
          padding: 4px 22px;
      }
      .itemTit span{
          height: 18px;
          line-height: 18px;
          border-left: 4px solid transparent;
          font-size: 14px;
      }
      .itemCon{
          padding: 4px 18px;
      }
      .waybill .progress{
          margin-bottom: 2px;
      }
      .waybill .progress h3{
          line-height: 28px;
      }
      .waybill .progress h3 span{
          font-size: 14px;
      }
      .waybill .progress h4{
          line-height: 18px;
      }
  
      .listStyle li span{
          font-size: 12px;
          height: 23px;
          line-height: 22px;
      }
      #myMap{
          width: 100%;
          height: 288px;
      }
      #myMap .amap-info-content{
          background: #00deff;
          border-radius: 8px;
          box-shadow: none;
          border: none;
          padding: 15px 25px 15px 15px;
      }
      #myMap .amap-icon img{
          width: 24px;
      }
      #myChart1{
          width: 100%;
          height: 150px;
      }
      .total{
          padding: 8px 0;
      }
      .total .totalNum strong span{
          font-size: 34px;
          line-height: 60px;
      }
      .total .totalNum b{
          font-size: 16px;
          line-height: 76px;
      }
  
      .infoPie ul li span{
          width: 56px;
          height: 56px;
          margin: 10px auto;
          border: 2px solid transparent;
          line-height: 60px;
          font-size: 20px;
      }
      .infoPie ul li p{
          font-size: 14px;
          padding-bottom: 8px;
      }
      .billState .StateTit{
          height: 31px;
      }
      .billState .StateBox span{
          height: 31px;
          line-height: 31px;
          font-size: 12px;
      }
      .billState .StateBox span:nth-child(1){
          width: 38%;
      }
      .billState .StateBox span:nth-child(2){
          width: 28%;
      }
      .billState .StateBox span:nth-child(3){
          width: 34%;
      }
      .billState .progress{
          margin-top: 12px;
      }
      .billState .progress h3{
          height: 20px;
          line-height: 20px;
          top: -7px;
      }
      #FontScroll{
          height: 128px;
      }
  
  
      .popup .popupClose{
          width: 32px;
          height: 32px;
          top: -16px;
          right: -16px;
          background-size: 100%
      }
  }
  
  @media screen and (max-width: 1365px) {
      .left{
          width: 24%;
      }
      .center{
          width: 48%;
      }
      .right{
          width: 28%;
      }
      #top .pageTit a{
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          margin-top: -15px;
          width: 60%;
      }
      #top .topBar .topTime{
          padding-top: 4px;
          font-size: 12px;
      }
      #top .topBar .company h3{
          height: 22px;
          line-height: 22px;
          font-size: 14px;
      }
      #top .topBar .company h3:before{
          width: 18px;
          height: 18px;
          top: 2px;
      }
      #top .topBar .company .dropdown{
          top: 22px;
      }
  
      #main{
          padding-top: 14px;
      }
  
      .item{
          margin-bottom: 10px;
      }
      .itemTit{
          padding: 4px 22px;
      }
      .itemTit span{
          height: 18px;
          line-height: 18px;
          border-left: 4px solid transparent;
          font-size: 14px;
      }
      .itemCon{
          padding: 4px 16px;
      }
      .waybill .progress{
          margin-bottom: 2px;
      }
      .waybill .progress h3{
          line-height: 28px;
      }
      .waybill .progress h3 span{
          font-size: 14px;
      }
      .waybill .progress h4{
          line-height: 18px;
      }
  
      .listStyle li span{
          font-size: 10px;
          height: 23px;
          line-height: 22px;
      }
      #myMap{
          width: 100%;
          height: 288px;
      }
      #myMap .amap-info-content{
          background: #00deff;
          border-radius: 8px;
          box-shadow: none;
          border: none;
          padding: 15px 25px 15px 15px;
      }
      #myMap .amap-icon img{
          width: 24px;
      }
      #myChart1{
          width: 100%;
          height: 150px;
      }
      .total{
          padding: 8px 0;
      }
      .total .totalNum strong span{
          font-size: 32px;
          line-height: 60px;
      }
      .total .totalNum b{
          font-size: 16px;
          line-height: 76px;
      }
  
      .infoPie ul li span{
          width: 56px;
          height: 56px;
          margin: 10px auto;
          border: 2px solid transparent;
          line-height: 60px;
          font-size: 20px;
      }
      .infoPie ul li p{
          font-size: 14px;
          padding-bottom: 8px;
      }
      .billState .StateTit{
          height: 31px;
      }
      .billState .StateBox span{
          height: 31px;
          line-height: 31px;
          font-size: 12px;
      }
      .billState .StateBox span:nth-child(1){
          width: 38%;
      }
      .billState .StateBox span:nth-child(2){
          width: 28%;
      }
      .billState .StateBox span:nth-child(3){
          width: 34%;
      }
      .billState .progress{
          margin-top: 12px;
      }
      .billState .progress h3{
          height: 20px;
          line-height: 20px;
          top: -7px;
      }
      #FontScroll{
          height: 128px;
      }
  
  
      .popup .popupClose{
          width: 32px;
          height: 32px;
          top: -16px;
          right: -16px;
          background-size: 100%
      }
  }
  
  @media screen and (max-width: 1165px) {
      .left{
          width: 24%;
      }
      .center{
          width: 48%;
      }
      .right{
          width: 28%;
      }
      #top .pageTit a{
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          margin-top: -15px;
          width: 60%;
      }
      #top .topBar .topTime{
          padding-top: 4px;
          font-size: 12px;
      }
      #top .topBar .company h3{
          height: 22px;
          line-height: 22px;
          font-size: 14px;
      }
      #top .topBar .company h3:before{
          width: 18px;
          height: 18px;
          top: 2px;
      }
      #top .topBar .company .dropdown{
          top: 22px;
      }
  
      #main{
          padding-top: 14px;
      }
  
      .item{
          margin-bottom: 10px;
      }
      .itemTit{
          padding: 4px 22px;
      }
      .itemTit span{
          height: 18px;
          line-height: 18px;
          border-left: 4px solid transparent;
          font-size: 14px;
      }
      .itemCon{
          padding: 4px 16px;
      }
      .waybill .progress{
          margin-bottom: 2px;
      }
      .waybill .progress h3{
          line-height: 28px;
      }
      .waybill .progress h3 span{
          font-size: 14px;
      }
      .waybill .progress h4{
          line-height: 18px;
      }
  
      .listStyle li span{
          font-size: 10px;
          height: 23px;
          line-height: 22px;
      }
      #myMap{
          width: 100%;
          height: 288px;
      }
      #myMap .amap-info-content{
          background: #00deff;
          border-radius: 8px;
          box-shadow: none;
          border: none;
          padding: 15px 25px 15px 15px;
      }
      #myMap .amap-icon img{
          width: 24px;
      }
      #myChart1{
          width: 100%;
          height: 150px;
      }
      .total{
          padding: 8px 0;
      }
      .total .totalNum strong span{
          font-size: 30px;
          line-height: 60px;
      }
      .total .totalNum b{
          font-size: 16px;
          line-height: 76px;
      }
  
      .infoPie ul li span{
          width: 56px;
          height: 56px;
          margin: 10px auto;
          border: 2px solid transparent;
          line-height: 60px;
          font-size: 20px;
      }
      .infoPie ul li p{
          font-size: 14px;
          padding-bottom: 8px;
      }
      .billState .StateTit{
          height: 31px;
      }
      .billState .StateBox span{
          height: 31px;
          line-height: 31px;
          font-size: 12px;
      }
      .billState .StateBox span:nth-child(1){
          width: 38%;
      }
      .billState .StateBox span:nth-child(2){
          width: 28%;
      }
      .billState .StateBox span:nth-child(3){
          width: 34%;
      }
      .billState .progress{
          margin-top: 12px;
      }
      .billState .progress h3{
          height: 20px;
          line-height: 20px;
          top: -7px;
      }
      #FontScroll{
          height: 128px;
      }
  
  
      .popup .popupClose{
          width: 32px;
          height: 32px;
          top: -16px;
          right: -16px;
          background-size: 100%
      }
  }
  
  
  
  </style>